<template>
	<view class="">
		<view class="" :style="{ paddingTop: statusH+10 + 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="登录密码"></u-icon>
		</navigator>
		<view class="item">
			<view class="bag flex items-center">
				<view class="left f2">
					旧密码
				</view>
				<view class="right f6">
					<input type="text" maxlength="6" v-model="y_password" placeholder="请填写旧密码"  placeholder-class="inpplay">
				</view>
			</view>
			<view class="bag flex items-center">
				<view class="left f2">
					新密码
				</view>
				<view class="right f6">
					<input type="text"  maxlength="6" v-model="password" placeholder="请填写新密码"  placeholder-class="inpplay">
				</view>
			</view>
			<view class="bag flex items-center">
				<view class="left f2">
					确认密码
				</view>
				<view class="right f6">
					<input type="number" maxlength="6" v-model="q_password" placeholder="请再次填写新密码确认"  placeholder-class="inpplay">
				</view>
			</view>
		</view>
		<view class="tips flex justify-between">
			<view class="left">
				登录密码已设置，如需更改请填写上述信息
			</view>
			<view class="right" @click="$msg.Navigoto('/pages_t/Settings/resword?type=wj')">
				忘记密码？
			</view>
		</view>

		<view class="btn flex-center" @click="login_passwords()">
			确认
		</view>
		<image src="@/static/logo.png" mode="widthFix" class="botbg">
	</view>
</template>

<script>
	// import {
	// 	addbankcard,
	// 	userBankCardInfo,
	// 	userBankCardEdit
	// } from '@/api/user';
	export default {
		data() {
			return {
				radiovalue1: '1',
				value: '',
				show: true,
				id_car: '',
				name: '',
				icon: '',
				id: '',
				q_password:'',
				password:'',
				y_password:'',
				statusH: 0,
				navbarH: 0,
				y_password:''
			};

		},
		onShow(e) {
			console.log('e', e)
		},
		onLoad(o) {
			this.getWinTop().then(res => {
				this.statusH = res.statusBar;
				this.navbarH = res.navbar;
			});
			if (o.info) {
				console.log('o.info', o.info)
				this.value = JSON.parse(o.info).text
				console.log('this.value', this.value)
				this.icon = JSON.parse(o.info).value
			}
			if (o.id) {
				this.id = o.id
				console.log('this.id', this.id)
				this.getdetail()
			}
		},
		methods: {
			getdetail() {

				userBankCardInfo({
					id: this.id
				}).then((res => {
					this.value = res.data.opening_bank
					this.name = res.data.username
					this.id_car = res.data.card_no
					console.log(this.id_car, this.name)
				}))
			},
			groupChange(e) {
				console.log(e, '1')
			},
			leftClick() {
				uni.reLaunch({
					url: '/views/user/bank/bank'
				})
			},
			radioChange(e) {
				console.log(e, '2')
			},
			login_passwords(){
				if(!this.password||this.password.length!=6){
					uni.showToast({
						icon:'none',
						title:'请设置六位数字密码'
					})
					return
				}
				if(!this.q_password||this.q_password.length!=6){
					uni.showToast({
						icon:'none',
						title:'请再次输入六位数字密码'
					})
					return
				}
				if(this.password!=this.q_password){
					uni.showToast({
						icon:'none',
						title:'两次输入密码不一致'
					})
					return
				}
				this.$api.login_passwords({
					password:this.password,
					q_password:this.q_password,
					y_password:this.y_password,
				}).then(res=>{
					uni.showToast({
						icon:'success',
						title:'设置成功'
					})
					uni.navigateBack()
				})
			},
			yanzheng(car) {
				car = car.replace(/\s/g, '').replace(/-/g, '');
				// 银行卡号正则表达式（目前一般为16位或19位数字）
				var regex = /^[0-9]{16}$|^[0-9]{19}$/;

				// 验证银行卡号是否匹配正则表达式
				return regex.test(car);
			}

		}
	}
</script>

<style lang="scss">
	.inpplay{
		color:#CCCED1;font-size: 28rpx;
	}
	page {
		background: #F7FBFF;
	}

	.item {
		margin: 0 auto;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-top: 52rpx;

		.bag {
			padding: 32rpx 24rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #333A47;
			}

			.right {
				width: 478rpx;
				border-bottom: 1px solid #F7FAFF;
				padding-bottom: 12rpx;
			}
		}


	}
	.tips{
		width: 686rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		.left{
			font-weight: 500;
			font-size: 24rpx;
			color: #3377FF;
		}
		.right{
			font-size: 24rpx;
			color: #666B75;
		}
	}



	.btn {
		width: 690rpx;
		height: 98rpx;
		background: #3377FF;
		border-radius: 14rpx;
		color: #Fff;
		position: absolute;
		bottom: 150rpx;
		left: 32rpx;
	}

	.botbg {
		position: absolute;
		bottom: 50rpx;
		width: 750rpx;
	}
</style>